<script setup lang="ts">
import MessageApi from "./components/message-api.vue";
import { NMessageProvider,darkTheme,useOsTheme } from "naive-ui";
// import { useDialog } from 'naive-ui'
import {ref, watch} from "vue"
import { useStore } from "./store"
const store = useStore()


const osThemeRef = useOsTheme()
const theme = ref(osThemeRef.value === 'dark' ? darkTheme : null)

if(localStorage.getItem("osTheme")) {
  if(localStorage.getItem("osTheme") == osThemeRef.value) {
    store.setOsTheme(osThemeRef.value as string)
    theme.value = osThemeRef.value === 'dark' ? darkTheme : null
    document.documentElement.setAttribute("theme", osThemeRef.value as string)
  }else{
    store.setOsTheme(localStorage.getItem("osTheme") as string)
    theme.value = localStorage.getItem("osTheme") === 'dark' ? darkTheme : null
    document.documentElement.setAttribute("theme", localStorage.getItem("osTheme") as string)
  }
}else{
  store.setOsTheme(osThemeRef.value as string)
  document.documentElement.setAttribute("theme", osThemeRef.value as string)
}



watch(() => store.osTheme, (newValue) => {
  theme.value = newValue === 'dark' ? darkTheme : null
  localStorage.setItem("osTheme", newValue)
  document.documentElement.setAttribute("theme", newValue)
})


// const dialog = useDialog()
// const warning = () => {
//   dialog.warning()
// }

</script>

<template>
  <div class="theme-box">
    <n-config-provider :theme="theme">
      <n-global-style />
      <n-message-provider>
        <MessageApi />
      </n-message-provider>
      <n-dialog-provider>
        <router-view></router-view>
      </n-dialog-provider>
    </n-config-provider>
  </div>
</template>

<style lang="scss" scoped>
.theme-box{
  background-color: var(--bs-background-color);
}

</style>
